<template>
	<view class="content">
		<el-row type="flex" justify="center">
			<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
				<view class="top h-box">
					<view class="flex-extend">
						<image src="../../static/logo@3x.png" style="width: 78.51rpx; height: 15.62rpx;"></image>
					</view>
					<el-dropdown @command="handleCommand">
						<span class="el-dropdown-link">
							{{ $i18n.locale == 'zh' ? '中文' : 'English' }}<i
								class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command='zh'>中文</el-dropdown-item>
							<el-dropdown-item command='en'>English</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>

					<view v-if="userInfo.email">
						<el-button type="primary" class="button1" @click="userCenter">{{ $t('home.personalCenter') }}
						</el-button>
						<el-button plain class="button2" @click="logOut">{{ $t('home.logOut') }}</el-button>
					</view>
					<view v-else class="btn-login h-box">
						<el-button @click="navToLogin" type="primary">{{ $t('home.login') }}</el-button>
						<view class="btn-register">
							<el-button @click="navToRegister" plain>{{ $t('home.register') }}</el-button>
						</view>
					</view>
				</view>
				<view>
					<view class="text-1">{{ $t('home.title') }}</view>
					<!-- <view class="text-2">{{ $t('home.subTitle') }}</view> -->
				</view>
				<!-- <view class="h-box justify-center justify-between" style="margin-top: 119.92rpx">
					<view class="card">
						<view class="card-content">
							<view class="card-content-title">{{ $t('home.totalHashrate') }}</view>
							<view class="card-content-value flex-h">
								<text class="card-content-digit">{{ chartData.netspace }} EiB</text>
							</view>
						</view>
						<my-canvas ref="canvas1" canvas-id='canvasID1' :stop-animation="stopAnimation" :x-offset='0'></my-canvas>
					</view>
					<view class="card">
						<view class="card-content">
							<view class="card-content-title">{{ $t('home.currenEarning') }}</view>
							<view class="card-content-value flex-h">
								<text class="card-content-digit">{{ chartData.current_earning }} XCH</text>
							</view>
						</view>
						<my-canvas ref="canvas2" canvas-id='canvasID2' :stop-animation="stopAnimation" :x-offset='9.5'></my-canvas>
					</view>
					<view class="card">
						<view class="card-content">
							<view class="card-content-title">{{ $t('home.chiaPrice') }}</view>
							<view class="card-content-value flex-h">
								<text class="card-content-label">$&nbsp;</text>
								<text class="card-content-digit">{{ chartData.chia_price }}</text>
							</view>
						</view>
						<my-canvas ref="canvas3" canvas-id='canvasID3' :stop-animation="stopAnimation" :x-offset='19'></my-canvas>
					</view>
				</view> -->
			</el-col>
		</el-row>
		<view class="count v-box" v-if="userInfo.user_id && userInfo.user_type != 1">
			<view class="h-box h-fill statisics-item">
				<text class="title flex-extend">{{ $t('home.a') }}</text>
				<view class="item">{{$utils.retain12(statisics.total_reward) || 0}}&nbsp;XCH</view>
			</view>
			<view class="h-box h-fill statisics-item">
				<text class="title flex-extend">{{ $t('home.b') }}</text>
				<view class="item">{{$utils.retain12(statisics.balance) || 0}}&nbsp;XCH</view>
			</view>
			<view class="h-box h-fill statisics-item">
				<text class="title flex-extend">{{ $t('home.c') }}</text>
				<view class="item">{{statisics.total_tib || 0}}&nbsp;TiB</view>
			</view>
			<view class="h-box h-fill statisics-item">
				<text class="title flex-extend">{{ $t('home.d') }}</text>
				<view class="item">{{statisics.current_tib || 0}}&nbsp;TiB</view>
			</view>
			<view class="h-box h-fill statisics-item">
				<text class="title flex-extend">{{ $t('home.e') }}</text>
				<view class="item">{{$utils.retain12(statisics.last_withdraw) || 0}}&nbsp;XCH</view>
			</view>
			<view class="h-box h-fill statisics-item">
				<text class="title flex-extend">{{ $t('home.f') }}</text>
				<view class="item">{{$utils.retain12(statisics.total_withdraw) || 0}}&nbsp;XCH</view>
			</view>

		</view>
		<view class="footer">
			<view class="one">{{ $t('home.copyright') }}</view>
			<!-- <view class="two">{{ $t('home.trademark') }}</view> -->
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	import {
		logOut,
		summary
	} from "../../js_sdk/uni-admin/user.js"
	import {
		getChiainfo
	} from "../../js_sdk/uni-admin/setting.js"
	export default {
		onShow() {
			this.stopAnimation = false
			console.log(`afterShow stopAnimation:${this.stopAnimation}`);
			// console.log(this.$i18n);
			// this.getChiainfo()
			this.summary()
		},
		onHide() {
			// console.log(this.$refs.canvas1.myReq);
			// window.cancelAnimationFrame(this.$refs.canvas1.myReq)
			// window.cancelAnimationFrame(this.$refs.canvas2.myReq)
			// window.cancelAnimationFrame(this.$refs.canvas3.myReq)
			this.stopAnimation = !this.stopAnimation
			console.log(`afterHide stopAnimation:${this.stopAnimation}`);
		},
		data() {
			return {
				stopAnimation: false,
				statisics: {
					balance: 0,
					current_tib: 0,
					last_withdraw: 0,
					total_reward: 0,
					total_tib: 0,
					total_withdraw: 0
				},
				chartData: []
			}
		},
		computed: {
			...mapState("user", ["userInfo"])
		},
		methods: {
			...mapMutations("user", ["REMOVE_TOKEN"]),
			handleCommand(cmd) {
				this.$i18n.locale = cmd
			},
			async summary() {
				if (this.userInfo.user_id && this.userInfo.user_type != 1) {
					let res = await summary()
					this.statisics = res.data
				}
			},
			async getChiainfo() {
				let res = await getChiainfo()
				this.chartData = res.data
			},
			userCenter() {
				uni.navigateTo({
					url: '../system/user/list'
				})
			},
			logOut() {
				logOut()
				this.REMOVE_TOKEN()
				uni.reLaunch({
					url: './statisics'
				})
			},
			navToLogin() {
				uni.navigateTo({
					url: "../login/login"
				})
			},
			navToRegister() {
				// uni.showModal({
				// 	title: '请选择注册角色',
				// 	confirmText: '注册管理员',
				// 	cancelText: '注册用户',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			uni.navigateTo({
				// 				url: "../login/register?type=0"
				// 			})
				// 		} else {
				// 			uni.navigateTo({
				// 				url: "../login/register?type=1"
				// 			})
				// 		}
				// 	}
				// })
				uni.navigateTo({
					url: "../login/register?type=1"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		background-color: rgba($color: #FFFFFF, $alpha: 0.15);
		padding: 10.54rpx 9.37rpx;
		border-radius: 3.9rpx;

		.el-dropdown {
			color: white;
			cursor: pointer;
		}

		.button1 {
			padding: 4.68rpx;
			font-size: 6.25rpx;
			background-color: #12A234;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
			margin-left: 13.67rpx;
		}

		.button2 {
			color: #FFFFFF;
			padding: 4.68rpx;
			font-size: 6.25rpx;
			background-color: rgba(0, 0, 0, 0);
			margin-left: 6.25rpx;
		}
	}

	.content {
		background-image: url(../../static/bg@2x.png);
		background-size: 100%;
		background-repeat: no-repeat;
		// height: 735.54rpx;
		height: 679.68rpx;
		padding: 12.5rpx 0 39.06rpx;
		position: relative;
	}

	.btn-register {
		margin-left: 6.25rpx;
	}

	/deep/ .btn-login .el-button {
		width: 34.37rpx;
		height: 15.62rpx;
		font-size: 6.25rpx;
		padding: 0rpx;
		box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
	}

	.btn-login {
		margin-left: 13.67rpx;
	}

	/deep/ .btn-register .el-button {
		background-color: transparent !important;
		color: #FFFFFF;
	}

	.text-1 {
		margin-top: 42.96rpx;
		font-size: 15.62rpx;
		color: #FFFFFF;
	}

	.text-2 {
		margin-top: 7.81rpx;
		color: #FFFFFF;
		font-size: 7.81rpx;
	}

	.btn-nav {
		margin-top: 18.75rpx
	}

	/deep/ .btn-nav .el-button {
		font-size: 6.25rpx;
		padding: 6.64rpx 9.37rpx;
	}

	.card {
		background-color: #FFFFFF;
		width: 117.18rpx;
		height: 130.46rpx;
		background: #FFFFFF;
		box-shadow: 0px 3px 10px #BCBCD4;
		border-radius: 4.68rpx;
		
		position: relative;

		.card-content-label,
		.card-content-digit {
			font-weight: 800;
		}

		&-content {
			padding: 9.37rpx;

			&-title {
				font-size: 6.25rpx;
			}

			&-value {
				margin-top: 18.75rpx;
			}

			&-label {
				font-size: 15.62rpx;
				align-self: flex-end;
			}

			&-digit {
				font-size: 15.62rpx;
				margin-left: 3.9rpx;
				font-weight: bold;
			}

			&-percent {
				font-size: 5.46rpx;
				color: #12A234;
				margin-left: 3.9rpx;
				font-weight: bold;
			}
		}
	}

	.bottom {
		max-width: 411.71rpx;
		font-size: 6.25rpx;

		.rights {
			margin-bottom: 12.5rpx;
		}

		.rights-more {
			margin-bottom: 39.06rpx;
		}
	}

	.count {
		// width: 429.68rpx;
		width: 402.34rpx;
		// height: 196.09rpx;
		border-radius: 12px;
		border: 1px solid #D7D7E0;
		box-shadow: 0 1.95rpx 5.85rpx rgba(191, 191, 206, 0.7);
		background-color: #ffffff;

		margin: 0 auto;
		margin-top: 35.93rpx;

		display: flex;
		justify-content: space-between;
		padding: 17.18rpx 14.06rpx;

		.left {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 17.18rpx 0;

			.item {
				display: flex;
				flex-direction: column;
				font-size: 6.25rpx;
				line-height: 9.37rpx;

				.title {
					color: #3B3E66;
					font-weight: bold;
				}

				.subTitle {
					color: #9D9EB2;
					font-weight: 400;
				}
			}
		}

		.right {
			width: 195.31rpx;
			padding: 21.87rpx 0;
			text-align: center;
			font-size: 6.25rpx;
			font-weight: bold;

			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}

	.footer {
		position: absolute;
		bottom: 48.04rpx;
		text-align: center;
		width: 411.71rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 6.25rpx;
		color: rgba(59, 62, 102, 0.8);

		.one {
			height: 9.37rpx;
			line-height: 9.37rpx;
			margin-bottom: 12.5rpx;
		}

		.two {
			height: 9.37rpx;
			line-height: 9.37rpx;
		}
	}

	.statisics-item {
		font-weight: bold;
		font-size: 6.25rpx;
	}

	.statisics-item:not(:last-child) {
		margin-bottom: 19.14rpx;
	}
</style>
